<template>
  <div class="form-container">
    <el-input
      v-model="lotId"
      placeholder="请输入 lotId"
      class="input-field"
    ></el-input>
    <el-input
      v-model="wflot"
      placeholder="请输入 wflot"
      class="input-field"
    ></el-input>

    <el-input
      v-model="device"
      placeholder="请输入device"
      class="input-field"
    ></el-input>

    <el-input
      v-model="cp"
      placeholder="请输入 cp"
      class="input-field"
    ></el-input>

    <el-input
      v-model="rp"
      placeholder="请输入 rp"
      class="input-field"
    ></el-input>

    <el-button @click="handleSubmit" type="primary">叠图</el-button>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { ElInput, ElButton, ElMessage, ElLoading } from "element-plus";
import axios from "axios";

let loadingInstance = null;

interface XAndYEntity {
  x: string;
  y: string;
  bin: string;
}

// CoordinateEntity 类型定义
interface CoordinateEntity {
  WfNo: string;
  X_CordAndY_Cord: XAndYEntity[];
}

// OverInkEntity 类型定义
interface OverInkEntity {
  LotID: string;
  CP: string;
  RP: string;
  wf_lot: string;
  coordinateList: CoordinateEntity[];
}

// 数据绑定
const lotId = ref("");
const wflot = ref("");
const cp = ref("");
const rp = ref("");
const device = ref("");

const toljson = [
  {
    x: "15",
    y: "9",
    bin: "7"
  },
  {
    x: "23",
    y: "9",
    bin: "7"
  },
  {
    x: "31",
    y: "9",
    bin: "7"
  },
  {
    x: "39",
    y: "9",
    bin: "7"
  },
  {
    x: "47",
    y: "9",
    bin: "7"
  },
  {
    x: "55",
    y: "9",
    bin: "7"
  },
  {
    x: "15",
    y: "10",
    bin: "8"
  },
  {
    x: "23",
    y: "10",
    bin: "8"
  },
  {
    x: "31",
    y: "10",
    bin: "8"
  },
  {
    x: "39",
    y: "10",
    bin: "8"
  },
  {
    x: "47",
    y: "10",
    bin: "8"
  },
  {
    x: "55",
    y: "10",
    bin: "8"
  },
  {
    x: "7",
    y: "19",
    bin: "7"
  },
  {
    x: "15",
    y: "19",
    bin: "7"
  },
  {
    x: "23",
    y: "19",
    bin: "7"
  },
  {
    x: "31",
    y: "19",
    bin: "7"
  },
  {
    x: "39",
    y: "19",
    bin: "7"
  },
  {
    x: "47",
    y: "19",
    bin: "7"
  },
  {
    x: "55",
    y: "19",
    bin: "7"
  },
  {
    x: "63",
    y: "19",
    bin: "7"
  },
  {
    x: "7",
    y: "20",
    bin: "8"
  },
  {
    x: "15",
    y: "20",
    bin: "8"
  },
  {
    x: "23",
    y: "20",
    bin: "8"
  },
  {
    x: "31",
    y: "20",
    bin: "8"
  },
  {
    x: "39",
    y: "20",
    bin: "8"
  },
  {
    x: "47",
    y: "20",
    bin: "8"
  },
  {
    x: "55",
    y: "20",
    bin: "8"
  },
  {
    x: "63",
    y: "20",
    bin: "8"
  },
  {
    x: "7",
    y: "29",
    bin: "7"
  },
  {
    x: "15",
    y: "29",
    bin: "7"
  },
  {
    x: "23",
    y: "29",
    bin: "7"
  },
  {
    x: "31",
    y: "29",
    bin: "7"
  },
  {
    x: "39",
    y: "29",
    bin: "7"
  },
  {
    x: "47",
    y: "29",
    bin: "7"
  },
  {
    x: "55",
    y: "29",
    bin: "7"
  },
  {
    x: "63",
    y: "29",
    bin: "7"
  },
  {
    x: "7",
    y: "30",
    bin: "8"
  },
  {
    x: "15",
    y: "30",
    bin: "8"
  },
  {
    x: "23",
    y: "30",
    bin: "8"
  },
  {
    x: "31",
    y: "30",
    bin: "8"
  },
  {
    x: "39",
    y: "30",
    bin: "8"
  },
  {
    x: "47",
    y: "30",
    bin: "8"
  },
  {
    x: "55",
    y: "30",
    bin: "8"
  },
  {
    x: "63",
    y: "30",
    bin: "8"
  },
  {
    x: "7",
    y: "39",
    bin: "7"
  },
  {
    x: "15",
    y: "39",
    bin: "7"
  },
  {
    x: "23",
    y: "39",
    bin: "7"
  },
  {
    x: "31",
    y: "39",
    bin: "7"
  },
  {
    x: "39",
    y: "39",
    bin: "7"
  },
  {
    x: "47",
    y: "39",
    bin: "7"
  },
  {
    x: "55",
    y: "39",
    bin: "7"
  },
  {
    x: "63",
    y: "39",
    bin: "7"
  },
  {
    x: "7",
    y: "40",
    bin: "8"
  },
  {
    x: "15",
    y: "40",
    bin: "8"
  },
  {
    x: "23",
    y: "40",
    bin: "8"
  },
  {
    x: "31",
    y: "40",
    bin: "8"
  },
  {
    x: "39",
    y: "40",
    bin: "8"
  },
  {
    x: "47",
    y: "40",
    bin: "8"
  },
  {
    x: "55",
    y: "40",
    bin: "8"
  },
  {
    x: "63",
    y: "40",
    bin: "8"
  },
  {
    x: "7",
    y: "49",
    bin: "7"
  },
  {
    x: "15",
    y: "49",
    bin: "7"
  },
  {
    x: "23",
    y: "49",
    bin: "7"
  },
  {
    x: "31",
    y: "49",
    bin: "7"
  },
  {
    x: "39",
    y: "49",
    bin: "7"
  },
  {
    x: "47",
    y: "49",
    bin: "7"
  },
  {
    x: "55",
    y: "49",
    bin: "7"
  },
  {
    x: "63",
    y: "49",
    bin: "7"
  },
  {
    x: "7",
    y: "50",
    bin: "8"
  },
  {
    x: "15",
    y: "50",
    bin: "8"
  },
  {
    x: "23",
    y: "50",
    bin: "8"
  },
  {
    x: "31",
    y: "50",
    bin: "8"
  },
  {
    x: "39",
    y: "50",
    bin: "8"
  },
  {
    x: "47",
    y: "50",
    bin: "8"
  },
  {
    x: "55",
    y: "50",
    bin: "8"
  },
  {
    x: "63",
    y: "50",
    bin: "8"
  },
  {
    x: "15",
    y: "59",
    bin: "7"
  },
  {
    x: "23",
    y: "59",
    bin: "7"
  },
  {
    x: "31",
    y: "59",
    bin: "7"
  },
  {
    x: "39",
    y: "59",
    bin: "7"
  },
  {
    x: "47",
    y: "59",
    bin: "7"
  },
  {
    x: "55",
    y: "59",
    bin: "7"
  },
  {
    x: "23",
    y: "60",
    bin: "8"
  },
  {
    x: "31",
    y: "60",
    bin: "8"
  },
  {
    x: "39",
    y: "60",
    bin: "8"
  },
  {
    x: "47",
    y: "60",
    bin: "8"
  }
];

const toljson2 = [
  {
    x: "15",
    y: "9",
    bin: "7"
  },
  {
    x: "23",
    y: "9",
    bin: "7"
  },
  {
    x: "31",
    y: "9",
    bin: "7"
  },
  {
    x: "39",
    y: "9",
    bin: "7"
  },
  {
    x: "47",
    y: "9",
    bin: "7"
  },
  {
    x: "55",
    y: "9",
    bin: "7"
  },
  {
    x: "15",
    y: "10",
    bin: "8"
  },
  {
    x: "23",
    y: "10",
    bin: "8"
  },
  {
    x: "31",
    y: "10",
    bin: "8"
  },
  {
    x: "39",
    y: "10",
    bin: "8"
  },
  {
    x: "47",
    y: "10",
    bin: "8"
  },
  {
    x: "55",
    y: "10",
    bin: "8"
  },
  {
    x: "7",
    y: "19",
    bin: "7"
  },
  {
    x: "15",
    y: "19",
    bin: "7"
  },
  {
    x: "23",
    y: "19",
    bin: "7"
  },
  {
    x: "31",
    y: "19",
    bin: "7"
  },
  {
    x: "39",
    y: "19",
    bin: "7"
  },
  {
    x: "47",
    y: "19",
    bin: "7"
  },
  {
    x: "55",
    y: "19",
    bin: "7"
  },
  {
    x: "63",
    y: "19",
    bin: "7"
  },
  {
    x: "7",
    y: "20",
    bin: "8"
  },
  {
    x: "15",
    y: "20",
    bin: "8"
  },
  {
    x: "23",
    y: "20",
    bin: "8"
  },
  {
    x: "31",
    y: "20",
    bin: "8"
  },
  {
    x: "39",
    y: "20",
    bin: "8"
  },
  {
    x: "47",
    y: "20",
    bin: "8"
  },
  {
    x: "55",
    y: "20",
    bin: "8"
  },
  {
    x: "63",
    y: "20",
    bin: "8"
  },
  {
    x: "7",
    y: "29",
    bin: "7"
  },
  {
    x: "15",
    y: "29",
    bin: "7"
  },
  {
    x: "23",
    y: "29",
    bin: "7"
  },
  {
    x: "31",
    y: "29",
    bin: "7"
  },
  {
    x: "39",
    y: "29",
    bin: "7"
  },
  {
    x: "47",
    y: "29",
    bin: "7"
  },
  {
    x: "55",
    y: "29",
    bin: "7"
  },
  {
    x: "63",
    y: "29",
    bin: "7"
  },
  {
    x: "7",
    y: "30",
    bin: "8"
  },
  {
    x: "15",
    y: "30",
    bin: "8"
  },
  {
    x: "23",
    y: "30",
    bin: "8"
  },
  {
    x: "31",
    y: "30",
    bin: "8"
  },
  {
    x: "39",
    y: "30",
    bin: "8"
  },
  {
    x: "47",
    y: "30",
    bin: "8"
  },
  {
    x: "55",
    y: "30",
    bin: "8"
  },
  {
    x: "63",
    y: "30",
    bin: "8"
  },
  {
    x: "7",
    y: "39",
    bin: "7"
  },
  {
    x: "15",
    y: "39",
    bin: "7"
  },
  {
    x: "23",
    y: "39",
    bin: "7"
  },
  {
    x: "31",
    y: "39",
    bin: "7"
  },
  {
    x: "39",
    y: "39",
    bin: "7"
  },
  {
    x: "47",
    y: "39",
    bin: "7"
  },
  {
    x: "55",
    y: "39",
    bin: "7"
  },
  {
    x: "63",
    y: "39",
    bin: "7"
  },
  {
    x: "7",
    y: "40",
    bin: "8"
  },
  {
    x: "15",
    y: "40",
    bin: "8"
  },
  {
    x: "23",
    y: "40",
    bin: "8"
  },
  {
    x: "31",
    y: "40",
    bin: "8"
  },
  {
    x: "39",
    y: "40",
    bin: "8"
  },
  {
    x: "47",
    y: "40",
    bin: "8"
  },
  {
    x: "55",
    y: "40",
    bin: "8"
  },
  {
    x: "63",
    y: "40",
    bin: "8"
  },
  {
    x: "7",
    y: "49",
    bin: "7"
  },
  {
    x: "15",
    y: "49",
    bin: "7"
  },
  {
    x: "23",
    y: "49",
    bin: "7"
  },
  {
    x: "31",
    y: "49",
    bin: "7"
  },
  {
    x: "39",
    y: "49",
    bin: "7"
  },
  {
    x: "47",
    y: "49",
    bin: "7"
  },
  {
    x: "55",
    y: "49",
    bin: "7"
  },
  {
    x: "63",
    y: "49",
    bin: "7"
  },
  {
    x: "7",
    y: "50",
    bin: "8"
  },
  {
    x: "15",
    y: "50",
    bin: "8"
  },
  {
    x: "23",
    y: "50",
    bin: "8"
  },
  {
    x: "31",
    y: "50",
    bin: "8"
  },
  {
    x: "39",
    y: "50",
    bin: "8"
  },
  {
    x: "47",
    y: "50",
    bin: "8"
  },
  {
    x: "55",
    y: "50",
    bin: "8"
  },
  {
    x: "63",
    y: "50",
    bin: "8"
  },

  {
    x: "23",
    y: "59",
    bin: "7"
  },
  {
    x: "31",
    y: "59",
    bin: "7"
  },
  {
    x: "39",
    y: "59",
    bin: "7"
  },
  {
    x: "47",
    y: "59",
    bin: "7"
  },

  {
    x: "23",
    y: "60",
    bin: "8"
  },
  {
    x: "31",
    y: "60",
    bin: "8"
  },
  {
    x: "39",
    y: "60",
    bin: "8"
  },
  {
    x: "47",
    y: "60",
    bin: "8"
  }
];
const API_URL_QUERY = "http://10.20.5.21:8080/api/queryTolData";
const API_URL_UPDATEDAT = "http://10.20.5.21:8080/api/updateDatOverInk";

let coordinateRequest = reactive<OverInkEntity>({
  LotID: lotId.value,
  CP: cp.value,
  RP: rp.value,
  wf_lot: wflot.value,
  coordinateList: []
});

// 提交按钮事件处理
const handleSubmit = async () => {
  if (!lotId.value || !wflot.value || !cp.value || !rp.value || !device.value) {
    ElMessage.error("请输入值");
    return;
  }

  if (
    device.value !== "TXABL01BB" &&
    device.value !== "TXABL01BC" &&
    device.value !== "TXABL01BD" &&
    device.value !== "TXABL01BD(CP)"
  ) {
    ElMessage.error(`没有这个device的模板,${device.value}`);
    return;
  }

  if (lotId.value.slice(0, 3) != "TOL") {
    ElMessage.error("仅支持TOL叠图");
    return;
  }

  try {
    loadingInstance = ElLoading.service({
      lock: true,
      text: "正在叠图，请稍候...",
      background: "rgba(0,0,0,0.3)"
    });

    const { data } = await axios.get(API_URL_QUERY, {
      params: {
        lotId: lotId.value,
        cp: cp.value,
        rp: rp.value
      }
    });

    for (let i = 0; i < data.length; i++) {
      let wf_no = data[i];

      let x_and_y;

      if (device.value == "TXABL01BB" || device.value == "TXABL01BC") {
        x_and_y = toljson;
      } else if (
        device.value == "TXABL01BD" ||
        device.value == "TXABL01BD(CP)"
      ) {
        x_and_y = toljson2;
      }
      coordinateRequest = {
        LotID: lotId.value,
        CP: cp.value,
        RP: rp.value,
        wf_lot: wflot.value,
        coordinateList: [
          {
            WfNo: wf_no,
            X_CordAndY_Cord: x_and_y
          }
        ]
      };

      await axios.post(`${API_URL_UPDATEDAT}`, coordinateRequest);

      ElMessage.success(`叠图成功，${lotId},测报和txt会在15分钟之后更新！！`);
    }
  } catch (error) {
    ElMessage.error(`请求失败，${error}`);
  } finally {
    if (loadingInstance) {
      loadingInstance.close();
    }
  }
};
</script>

<style scoped>
.form-container {
  max-width: 400px;
  margin: 30 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #f9f9f9;
}

.input-field {
  margin-bottom: 20px;
}

.el-button {
  width: 100%;
}
</style>
